<template>
  <div class="model-exam">
    <div class="left">
      <ul class="tabs">
        <li
          :key="index"
          v-for="(item, index) in navlist"
          :class="['item', currentIndex == index ? 'active' : '']"
          @click="handleItemClick(index)"
        >
          <img class="icon" :src="getIconAssetURL(item.icon)" />
          <span class="text">{{ item.name }}</span>
        </li>
      </ul>
    </div>
    <div class="right">
      <!-- 计算模型考核 -->
      <model-appraisal v-if="currentIndex === 0"></model-appraisal>
      <!-- 计算方案考核 -->
      <scheme-appraisal v-else-if="currentIndex === 1" />
      <scheme-exam v-else-if="currentIndex === 2"></scheme-exam>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
// 模型考核
import ModelAppraisal from './cpns/ModelAppraisal/Index.vue'
// 计算方案考核
import SchemeAppraisal from './cpns/SchemeAppraisal/Index.vue'
import SchemeExam from './cpns/scheme-exam/index.vue'

import { getIconAssetURL } from '@/utils/loadAssets'

const navlist = [
  {
    icon: 'u7326.png',
    name: '计算模型考核'
  },
  {
    icon: 'u7400.png',
    name: '计算方案考核'
  },
  {
    icon: 'zhpd.png',
    name: '模型综合评定'
  }
]

// 当前选中的索引
const currentIndex = ref(0)
// 菜单切换
const handleItemClick = (index) => {
  currentIndex.value = index
}
</script>

<style lang="less" scoped>
.model-exam {
  height: 100%;

  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: #1b3267;
  box-sizing: border-box;

  .left {
    height: 100%;
    width: 200px;
    border: 1px solid var(--border-primary);
    border-radius: 5px;
    box-sizing: border-box;

    .tabs {
      height: 100%;
      box-sizing: border-box;

      .item {
        display: flex;
        align-items: center;
        height: 45px;
        width: 100%;
        margin-bottom: 5px;
        padding-left: 30px;
        // border-left: 3px solid #00d3e9;
        cursor: pointer;
        box-sizing: border-box;
        color: #fff;

        .icon {
          width: 20px;
          height: 20px;
        }

        .text {
          font-size: 16px;
          margin-left: 10px;
        }

        &.active,
        &:hover {
          background: #3e6688;
          // border-left: 3px solid var(--submenu-active-border);
          box-sizing: border-boxs;

          .text {
            color: #00d3e9;
          }
        }
      }
    }
  }

  .right {
    height: 100%;
    width: calc(100% - 220px);
    border: 1px solid var(--border-primary);
    border-radius: 5px;
    box-sizing: border-box;
  }
}
</style>
